<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left" @tap="toSignIn()">
				<image class="back" src="../../static/images/common/back.png" mode=""></image>
			</view> 
		</view>	
		<view class="logo">
			<image src="../../static/images/signin/huo.png" mode=""></image>
		</view>	
		<view class="main">
			<view class="title">
				注册
			</view>
			<view class="inputs">
				<view class="inputs-div">
					<input class="usr" @input="getUser" type="text" placeholder="请取个名字" placeholder-style="color:#aaa;font-weight:400;"/>
					<view class="employ" v-if="useremploy">
						已占有
					</view>
					<image class="ok" src="../../static/images/signin/gou.png" mode="" v-if="isuser"></image>
				</view>
				<view class="inputs-div">
					<input class="email" v-model="email" type="text" placeholder="请输入邮箱" placeholder-style="color:#aaa;font-weight:400;" @input="isEmail"/>
					<view class="employ" v-if="emailemploy">
						已占有
					</view>
					<view class="invalid" v-if="invalid">
						邮箱无效
					</view>
					<image class="ok" src="../../static/images/signin/gou.png" mode="" v-if="isemail"></image>
				</view>
				<view class="inputs-div">
					<input class="type" @input="getPsw" :type="type" placeholder="这里输入密码"  placeholder-style="color:#aaa;font-weight:400;"/>
					<view class="employ" v-if="employ">
						已占用
					</view>
					<image class="unlook" @tap="looks()" :src="lookurl" mode=""></image>
				</view>
			</view>
		</view>
		<view :class="[{submit:isok},{submit1:!isok}]">
			注册
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:'password',
				isuser:false,		//用户名是否可用
				isemail:false,	//邮箱是否可用
				look:true,		//是否显示密码
				invalid:false,	//邮箱是有效
				employ:false,	
				useremploy:false,//用户名是否占有
				emailemploy:false,//邮箱是否占有
				lookurl:'../../static/images/signin/xianshimima.png',
				email:'',		//用户邮箱
				isok:false,
				username:'', 	//用户名
				psw:''			//密码
				
			}
		},
		methods: {
			looks: function(){
				if(this.look){
					this.type="password";
					this.look=!this.look;
					this.lookurl='../../static/images/signin/xianshimima.png';
				}else{
					this.type="text";
					this.look=!this.look;
					this.lookurl='../../static/images/signin/yincangmima.png';
				}
			},
			//判断邮箱格式
			isEmail: function(e){
				var reg  = /^[A-Za-zd0-9]+([-_.][A-Za-zd]+)*@([A-Za-zd0-9]+[-.])+[A-Za-zd]{2,5}$/;
				//this.email = e.detail.value;
				if(this.email.length>0){
					if(reg.test(this.email)){
						this.invalid=false;
					}else{
						this.invalid=true;
					}
				}
				this.changeColor();
			},
			//跳转到注册页面
			toSignIn: function(){
				uni.navigateTo({
					url: '../signin/signin'
				})
			},
			//获取用户名
			getUser: function(e){
				this.username = e.detail.value;
				this.changeColor();
			},
			//获取密码
			getPsw: function(e){
				this.psw = e.detail.value;
				this.changeColor();
			},
			//按键变色
			changeColor: function(){
				if(this.isuser && this.isemail && this.psw.length>=6){
					this.isok = true;
				}else{
					this.isok = false;
				}
			}
		},
	}
</script>

<style lang="scss">
	@import "../../commons/css/mycss.scss";
	.logo {
		text-align: center;
	image{
		padding-top: 256rpx;
		width: 194rpx;
		height: 92rpx;
		margin: 0 auto;
		}
	}
	.main{
		padding: 54rpx $uni-spacing-col-lg 120rpx;
		width: 100%;
		box-sizing: border-box;
		.title{
			font-size: 56rpx;
			font-weight: 500;
			color: $uni-text-color;
			line-height: 80rpx;
		}
		.inputs{
			padding-top: 48rpx;
			input{
				padding-top: 40rpx;
				height: 88rpx;
				font-size: $uni-font-size-lg;
				font-weight: 500;
				color: $uni-text-color;
				line-height: 88rpx;
				border-bottom: 1px solid $uni-border-color;
			}
			.psw{
				padding-top: 8rpx;
			}
			
		}
		.inputs-div{
			position: relative;
		}
		.employ ,.invalid{
			position: absolute;
			right: 0;
			top: 40rpx;
			float: right;font-size: $uni-font-size-base;
			font-weight: 500;
			color: $uni-color-warning;
			line-height: 88rpx;
		}
		.ok{
			position: absolute;
			top: 66rpx;
			right: 0;
			width: 42rpx;
			height: 42rpx;
		}
		.look ,.unlook{
			position: absolute;
			top: 66rpx;
			right: 0;
			width: 42rpx;
			height: 42rpx;
		}
	}
	.submit{
		text-align: center;
		width: 520rpx;
		line-height: 96rpx;
		background: $uni-color-primary;
		box-shadow: 0rpx 50rpx 32rpx -36rpx rgba(255,228,49,0.4);
		border-radius: 48rpx;
		font-size: $uni-font-size-lg;
		font-weight: 500;
		color: $uni-text-color;
		margin: 0 auto 96rpx;
	}
	.submit1{
		text-align: center;
		width: 520rpx;
		line-height: 96rpx;
		background: rgba(39,40,50,0.3);
		box-shadow: 0rpx 50rpx 32rpx -36rpx rgba(255,228,49,0.4);
		border-radius: 48rpx;
		font-size: $uni-font-size-lg;
		font-weight: 500;
		color: $uni-text-color-inverse;
		margin: 0 auto 96rpx;
	}
</style>
